<!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" lang="zh-CN">
<![endif]-->
<!--[if !(IE 7) | !(IE 8)  ]><!-->
<html lang="zh-CN">
<!--<![endif]-->
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content="tinshow，听说"/>
    <meta name="description" content="听说"/>
    <meta name="author" content="randy">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="x-dns-prefetch-control" content="on"/>
    <title>发表文章 | 听说 </title>
    <link rel='stylesheet' id='javin-font-css'
          href='//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css?ver=1463202082' type='text/css' media='all'/>
    <link rel='stylesheet' id='javin-style-css' href='${request.contextPath!}/css/style.css?ver=1463202082'
          type='text/css' media='all'/>
    <link href="/css/wangEditor.min.css" rel="stylesheet">
    <link type="text/css" rel="stylesheet" href="/css/player.css">
    <style type="text/css">
        #billboard {
            background-image: url(http://7xjgc6.com1.z0.glb.clouddn.com/9fd75c783ecc5c8afe958820a56ea578.jpg);
            height: 300px;
        }

        #editor {
            height: 100%;
            color: #333;
        }

        textarea, #editor div {
            display: inline-block;
            width: 49%;
            height: 100%;
            vertical-align: top;
            box-sizing: border-box;
            padding: 0 20px;

        }

        textarea {
            border: none;
            border-right: 1px solid #ccc;
            resize: none;
            outline: none;
            background-color: #f6f6f6;
            font-size: 14px;
            font-family: 'Monaco', courier, monospace;
            padding: 20px;
        }

        code {
            color: #f66;
        }

        .toolbar {
            margin-top: 30px;
            border-radius: 4px;
            /*border: 1px solid #ccc;*/
            background-color: #999;
        }

        .container {
            border: 1px solid #ccc;
            height: 400px;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<header id="header">
<#include "/blocks/header.ftl"/>
</header>

<div id="billboard" class="billboard">
</div>
<form id="article_form">
    <section id="title">
        <div class="text-title"><input type="text" name="article-title" class="article-title" id="article-title"
                                       placeholder="无标题文章"/>
            <span>分类：</span>
            <div class="select-wrap">
                <select id="classification">
                    <option value="1">文章分类</option>
                </select>
            </div>
        </div>
        <div>
            <textarea class="abstract" id="abstract" name="abstracts" placeholder="无摘要" value="" maxlength="300"
                      style="height: 28px;"></textarea>
        </div>
    </section>
    <section id="text-edit" class="content edit-body">
        <div id="div1" class="toolbar">
        </div>
        <div style="padding: 5px 0; color: #ccc"></div>
        <div id="editor-container">
            <div id="editor-trigger" class="container">
            </div>
        </div>
        <div class="tags">
            <span>标签：</span>
            <input type="text" id="tags" placeholder="请输入关键字，用逗号隔开"/>
        </div>
        <div class="types">
            <span>是否原创：</span>
            <input type="radio" value="origin" name="article_type" id="article_type" checked="checked"
                   class="origin"/><span>原创</span>
            <input type="radio" value="reprinted" name="article_type" id="article_type"
                   class="reprinted"/><span>转贴</span>
            <input type="text" name="reprinted_des" class="reprinted_url" id="reprinted_url" placeholder="请输入转帖的原文链接"/>
        </div>
    <#--<div class="text-edit">-->
    <#--<div id="editor">-->
    <#--<textarea :value="input" @input="update" id="editor1"></textarea>-->
    <#--<div  v-html="compiledMarkdown"></div>-->
    <#--</div>-->
    <#--</div>-->
    </section>
</form>
<div class="edit-ctrl edit-fixed-footer">
    <div class="container_edit">
    <#--<button type="button" class="stash-draft btn-disabled ">保存草稿</button>-->
        <button type="button" class="btn-green btn-save btn-disabled ">发 布</button>
    </div>
</div>

<footer id="footer">
<#include "/blocks/footer.ftl"/>
</footer>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/wangEditor.min.js"></script>
<script src="/js/xss.js"></script>
<script src="//cdn.bootcss.com/layer/3.0.1/layer.min.js"></script>
<script type="text/javascript">
    var E = window.wangEditor;
    var editor = new E('#div1', '#editor-trigger');
    editor.customConfig.menus = [
        'head',  // 标题
        'bold',  // 粗体
        'italic',  // 斜体
        'underline',  // 下划线
        'strikeThrough',  // 删除线
        'foreColor',  // 文字颜色
        'backColor',  // 背景颜色
        'link',  // 插入链接
        'list',  // 列表
        'justify',  // 对齐方式
        'quote',  // 引用
        'image',  // 插入图片
        'table',  // 表格
        'video',  // 插入视频
        'code',  // 插入代码
        'undo',  // 撤销
        'redo'  // 重复
    ]
    var index;
    editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存图片
    editor.customConfig.uploadImgServer = '/file/upload_file_for_upyun'  // 上传图片到服务器
    editor.customConfig.uploadFileName = 'image_file'
    editor.customConfig.uploadImgMaxSize = 10 * 1024 * 1024
    editor.customConfig.uploadImgTimeout = 1000 * 60
    editor.customConfig.uploadImgHooks = {
        before: function (xhr, editor, files) {
            // 请求发送之前
            index = layer.msg('上传中...', {
                icon: 16
                , shade: 0.01
            });
        },
        success: function (xhr, editor, result) {
            layer.msg(result.msg);
            // 上传成功之后
            // result 是服务器端返回的结果
        },
        fail: function (xhr, editor, result) {
            layer.msg(result.msg);
            // 上传失败之后
            // result 是服务器端返回的结果
        },
        error: function (xhr, editor) {
            layer.msg("上传图片错误，请重试");
            // 请求发生错误
        },
        timeout: function (xhr, editor) {
            layer.msg("请求超时");
            // 请求超时
        }
    }
    editor.create();
    $(".btn-save").click(function () {
        if ($('#article-title').val() == '') {
            layer.msg("文章标题不能为空");
            return;
        }
        if (editor.txt.text() == '') {
            layer.msg("文章内容不能为空");
            return;
        }
        $.ajax({
            type: "post",
            dataType: "json",
            url: "/article/submit",
            data:{
                title: filterXSS($('#article-title').val()),
                abstract: filterXSS($("#abstract").val()),
                context: filterXSS(editor.txt.html()),
                tags: filterXSS($('#tags').val()),
                classification_id: ($('#classification').val()),
                type: filterXSS($("input[name='article_type']:checked").val()),
                reprinted_url: filterXSS($('#reprinted_url').val())
            },
//            contentType: "application/json",
            async: true,
            traditional: true,
            beforeSend: function () {
                index = layer.load(0, {shade: false});
            },
            success: function (result) {
                if(result.success == 1){
                    layer.close(index);
                    layer.msg(result.msg);
                    location.href="/article/detail/" + result.data.article_id;
                }else{
                    layer.close(index);
                    layer.msg(result.msg);
                    return;
                }
            }

        })
    })
</script>
<script>
    $(document).on("click", function (ev) {
        if ($(ev.target).hasClass('abstract')) {
            $('#abstract').css("height", "180px");
            $('#abstract').addClass("abstract-height");
        } else {
            $('#abstract').css("height", "28px");
            $('#abstract').addClass("abstract-height");
        }
    })

    $(".origin").click(function () {
        $('.reprinted_url').hide(200);
    })
    $(".reprinted").click(function () {
        $('.reprinted_url').show(200);
    })

</script>
<#--<script>-->
<#--window.onload=function() {-->
<#--new Vue({-->
<#--el: '#editor',-->
<#--data: {-->
<#--input: '# hello'-->
<#--},-->
<#--computed: {-->
<#--compiledMarkdown: function () {-->
<#--return marked(this.input, {sanitize: true})-->
<#--}-->
<#--},-->
<#--methods: {-->
<#--update: _.debounce(function (e) {-->
<#--this.input = e.target.value-->
<#--}, 300)-->
<#--}-->
<#--})-->
<#--}-->
<#--</script>-->
</body>


</html>